const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports={
  entry:'./src/index.js',
  output:{
      filename:'built.js',
      path:resolve(__dirname,'build')
  },
  module:{
      rules:[
          {
              test:'/\.css$/',
              //使用多个loader的时候 用use
              use:['style-loader','css-loader']
          },
          //问题：默认处理不了html中的引入文件
          {
            test:'/\.(webp|jpeg|png|gif)$/',
            //单个使用loader
            //下载url-loader file-loader
            loader:'url-loader',
            options:{
                //图片小于8kb，会被base64处理
                //优点：减小请求数量，降低服务器压力
                //缺点：图片体积更大，请求速度变慢
                limit:10 * 1024,
                //问题：url-loader默认使用es6去解析
                //解决：关闭url-loader的es6模块，使用commonjs
                esModule:false,
                //给图片重命名
                //[hash:10]取图片的hash值前十位
                //[ext]取文件原来的扩展名
                name:'[hash:10].[ext]'
            }
        },{
            //html-loader会使用commonjs语法解析 ，所以会报错
            test:/.html$/,
            loader:'html-loader',
        }
      ]
  },
  plugins:[
      new HtmlWebpackPlugin({
          template:'./src/index.html'
      })
  ],
  mode:"development"  
}